<!DOCTYPE html>
<html lang="en">
<head>
    <!--复选框选中样式-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>注册</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .user-info-area{
            height: auto;
            width: 90%;
            margin: auto;
            overflow: hidden;
        }
        .user-info-area ul{
            /*background-color: #00a0e9;*/
        }
        .user-info-area ul li{
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .li-type{

        }
        .li-type{
            line-height: 1.6rem;
            display: block;
            color: #666;
            font-size: 0.28rem;
            height: 100%;
            width: 18%;
            left: 0;
        }
        .input-area{
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
        }
        .input-area-code{
            right: 30%;
            /*background-color: aqua;*/
            width: 46%;
        }
        .input-area-me{
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            left: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            outline: none;
        }
        .get-code{
            font-size: 0.28rem;
            outline: none;
            background-color: transparent;
            color: #666;
            width: 25%;
            position: absolute;
            right: 4%;
            bottom: 0.15rem;
            height: 0.5rem;
            border-left: 1px solid #e3e3e3;
        }
        .select-local-area{
            font-size: 0.28rem;
            width: 70%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
        }
        .select-local-area select{
            width: 32%;
            height: 100%;
            outline: none;
            color: #666;
        }
        .select-local-area select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            font-size: 0.28rem;
            /*很关键：将默认的select选择框样式清除*/
            background-color: white;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            /*在选择框的最右侧中间显示小箭头图片*/
            background-image: url("../../../master/img/bottomIcon.jpg");
            background-repeat: no-repeat;
            background-position: 1rem center;
            background-size: 0.2rem;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            /*padding-right: 14px;*/
        }


        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        .select-local-area select::-ms-expand { display: none; }
        /*选择区域*/
        .agreement{
            position: relative;
            width: 100%;
            height: 0.5rem;
            margin-top: 0.3rem;
        }
        .agreement a{
            position: absolute;
            left: 0.5rem;
            top: 0.1rem;
            color: #666;
            font-size: 0.28rem;
        }
        /*选矿样式*/
        /*隐藏*/
        #checkboxInput{
            display: none;
        }
        .checkbox-area {
            float: left;
            width: 0.2rem;
            height: 0.2rem;
            position: relative;
            margin-top: 0.15rem;
        }
        /* Create the checkbox button*/
        .checkbox-area label {
            display: block;
            width: 100%;
            height: 100%;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            z-index: 1;
            background: snow;
            border: 1px solid  #CDC9C9;
        }
        /*Create the checked state*/
        .checkbox-area input[type=checkbox]:checked + label {
            background: #EE2C2C;
        }
        /*选矿end*/

        .register-btn-area {
            text-align: center;
            width: 100%;
            height: 0.8rem;
            margin: 0.8rem auto 0.4rem auto;
        }
        .register-btn {
            height: 100%;
            width: 45%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        .one {float: left;}
        .two{float: right;}
        .server-area{
            width: 93% !important;
            background-position: right !important;
        }
        .area-server{width: 76%;}
        .prompt-area{
            padding-top: 0.1rem;
            width: 100%;
            height:auto;
        }
        .prompt-area p{
            font-size: 0.28rem;
            color: #666;}
        .to-login{
            width: 100%;
            height: auto;
        }
        .had-account{
            color: #666;
            font-size: 0.28rem;
        }
        .to-login-now{
            font-size: 0.28rem;
            color: #F23A38;
        }
        /*设置主体z-index*/
        .main-body-area{z-index: 100}
        .hideDom{display: none}
        /*以下为遮罩层*/
        .modal-area{
            position: absolute;
            top: 0;

        }
        .modal-box{
            z-index: 100000;
            background-color: black;
            opacity: 0.5;
            position: fixed;
            top: 0;
        }
        .show-box-area{
            width: 100%;
            height: 100%;
            position: absolute;
            padding-top: 1rem;
            top: 0;
        }
        .local-input-area {
            z-index: 100000;
            text-align: center;
            width: 6.6rem;
            height: 4rem;
            margin: auto;
            background-color: white;
            margin-top: 1rem;
            position: relative;
        }
        .select-ul{
            padding-bottom: 0.4rem;
            padding-top: 0.4rem;
            width: 90%;
            height: 2rem;
            /*background-color: #00aeef;*/
            margin: auto;
        }
        .select-ul li{
            width: 1.5rem;
            float: left;
            height: 0.5rem;
            /*background-color: bisque;*/
            margin: 0.24rem;
        }
        .select-ul li p input{
            display: none;
        }

        .select-ul li lib{
            color: #666;
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
            background-color: transparent;
            border: 1px solid #ADADAD;
            border-radius: 0.1rem;
        }
        .select-btn-area{
            padding: 0.15rem 0;
            height: 0.5rem;
            width: 50%;
            margin: auto;
        }
        .cancel-btn{float: left}
        .ensure-btn{float: right}
        .cancel-btn,.ensure-btn{
            width: 40%;font-size: 0.25rem;
            height: 100%;color: #666;
            background-color: white;
            border-radius: 0.1rem;
            border: 1px solid #ADADAD;
        }
        /*选矿*/
        .select-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
        }
        .select-ul li p{

        }
        .select-ul li p input[type=checkbox]:checked + label {
            border-color: #FA8072;
            color: #FA8072;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>注册</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="user-info-area">
        <ul>
            <li>
                <span class="li-type">邀请码</span>
                <input class="input-area" type="text" placeholder="如有 请输入邀请码(非必填)">
            </li>
            <li>
                <span class="li-type">手机号</span>
                <input class="input-area" type="text" placeholder="请输入紧急联系方式">
            </li>
            <li>
                <span class="li-type">验证码</span>
                <input class="input-area input-area-code" type="text" placeholder="输入验证码">
                <button class="get-code">获取验证码</button>
            </li>
            <li>
                <span class="li-type">所在区域</span>
                <div class="select-local-area">
                    <select><option>省</option></select>
                    <select><option>市</option></select>
                    <select><option>区</option></select>
                </div>

            </li>
            <li>
                <span class="li-type">服务区域</span>
                <div class="select-local-area area-server">
                    <select class="server-area area-btn">
                        <option>请选择服务区域</option>
                    </select>
                </div>
            </li>
            <li>
                <span class="li-type">服务类目</span>
                <div class="select-local-area area-server">
                    <select class="server-area type-btn">
                        <option>请选择服务区域</option>
                    </select>
                </div>
            </li>
            <li>
                <span class="li-type">服务类型</span>
                <div class="select-local-area area-server">
                    <select class="server-area local-btn">
                        <option>请选择服务区域</option>
                    </select>
                </div>
            </li>
            <li>
                <input class="input-area-me" type="text" placeholder="介绍以下自己吧～">
            </li>
        </ul>
        <div class="agreement">
            <section>
                <div class="checkbox-area">
                    <input type="checkbox" value="1" id="checkboxInput" name="" />
                    <label for="checkboxInput"></label>
                </div>
            </section>
            <a href="#">我已经阅读并同意《云安装服务协议》</a>
        </div>
        <div class="prompt-area">
            <p style="line-height: 0.4rem">
                温馨提示：没有实名认证和没有设置服务信息、服务承诺的师傅无法接单哦。
            </p>
        </div>
        <div class="register-btn-area">
            <button class="register-btn one">实名认证</button>
            <button class="register-btn two">稍后认证</button>
        </div>
        <div class="to-login">
            <span class="had-account">已有云安装账号？</span>
            <a class="to-login-now" href="./login.html">立即登录</a>
        </div>
    </div>
</div>
<!--遮罩层-->
<div class="modal-area">
    <div class="modal-box"></div>
    <div class="show-box-area">
        <div class="local-input-area">
            <ul class="select-ul">
                <li>
                    <p>
                        <input name="area" type="checkbox" value="1" id="check1"/>
                        <label for="check1">桥西区</label>
                    </p>
                </li>
                <li>
                    <p>
                        <input name="area" type="checkbox" value="2" id="check2"/>
                        <label for="check2">桥西区</label>
                    </p>
                </li>
                <li>
                    <p>
                        <input name="area" type="checkbox" value="3" id="check3"/>
                        <label for="check3">桥西区</label>
                    </p>
                </li>
                <li>
                    <p>
                        <input name="area" type="checkbox" value="4" id="check4"/>
                        <label for="check4">桥西区</label>
                    </p>
                </li>
                <li>
                    <p>
                        <input name="area" type="checkbox" value="5" id="check5"/>
                        <label for="check5">桥西区</label>
                    </p>
                </li>
                <li>
                    <p>
                        <input name="area" type="checkbox" value="6" id="check6"/>
                        <label for="check6">桥西区</label>
                    </p>
                </li>
            </ul>
            <div class="select-btn-area">
                <button class="cancel-btn">取消</button>
                <button class="ensure-btn">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="../../../master/lib/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        //遮罩层块级大小设置
        $('.modal-area').css('width',$(window).width()+ 'px')
            .css('height',$(window).height()+ 'px');
        $('.modal-box').css('width',$('.modal-area').width()+ 'px')
            .css('height',$('.modal-area').height()+ 'px');
        $(window).resize(function () {//遮罩自适应
            $('.modal-area').css('width',$(window).width()+ 'px')
                .css('height',$(window).height()+ 'px');
            $('.modal-box').css('width',$('.modal-area').width()+ 'px')
                .css('height',$('.modal-area').height()+ 'px');
        });
//        显示隐藏控制
        $('.area-btn').click(function () {
            $('.modal-area').removeClass('hideDom')
            $('.area-btn').hide();//选项框隐藏
        })
        $('.cancel-btn').click(function () {
            $('.modal-area').addClass('hideDom')
            $('.area-btn').show();//选项框隐藏
        })

    });
</script>
</body>
</html>